import { Meta } from '@storybook/blocks';
import { SingleLineTextWithTooltip } from '../text';

<Meta
  title='文档/入门指南'
  parameters={{
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

# YCloud UI 组件库入门指南

## 简介

YCloud UI 是一套基于 React 和 Material UI 构建的现代化组件库，专为企业级应用设计。组件库提供了一系列高质量的组件，帮助开发者快速构建美观、一致且易于使用的用户界面。

## 前置依赖

在安装 YCloud UI 之前，请确保您已经安装了以下依赖：

```bash
# 使用 npm
npm install @mui/material @emotion/react @emotion/styled

# 使用 yarn
yarn add @mui/material @emotion/react @emotion/styled

# 使用 pnpm
pnpm add @mui/material @emotion/react @emotion/styled
```

## 安装

您可以使用 npm、yarn 或 pnpm 安装 YCloud UI 组件库：

```bash
# 使用 npm
npm install ycloud-ui

# 使用 yarn
yarn add ycloud-ui

# 使用 pnpm
pnpm add ycloud-ui
```

## 基本使用

安装完成后，您可以在项目中引入并使用组件：

```jsx
import React from 'react';
import { SingleLineTextWithTooltip } from 'ycloud-ui';

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <SingleLineTextWithTooltip
        text='这是一段较长的文本，当内容超出容器宽度时会自动截断并显示省略号。'
        variant='body1'
      />
    </div>
  );
}

export default App;
```

## 组件示例

### 单行文本组件

单行文本组件用于显示可能会超出容器宽度的文本内容，自动截断并在悬停时显示完整内容。

```jsx
import { SingleLineTextWithTooltip } from 'ycloud-ui';

// 基础用法
<SingleLineTextWithTooltip
  text="这是一段较长的单行文本，当内容超出容器宽度时会自动截断并显示省略号。"
  variant="body1"
/>

// 自定义样式
<SingleLineTextWithTooltip
  text="自定义样式的单行文本"
  variant="h6"
  color="primary"
  fontWeight="bold"
  sx={{
    p: 2,
    bgcolor: '#f5f5f5',
    borderRadius: '4px'
  }}
/>
```

### 多行文本组件

多行文本组件用于显示可能需要限制行数的文本内容，超出指定行数时自动截断并在悬停时显示完整内容。

```jsx
import { MultiLineTextWithTooltip } from 'ycloud-ui';

// 基础用法
<MultiLineTextWithTooltip
  text='这是一段较长的多行文本内容，当内容超出指定的行数限制时，组件会自动截断并显示省略号。用户悬停在文本上时，会通过Tooltip显示完整的文本内容。'
  maxLines={2}
  variant='body1'
/>;
```

## 主题配置

YCloud UI 组件库基于 Material UI 构建，支持主题定制。您可以通过 ThemeProvider 组件为您的应用设置自定义主题：

```jsx
import { ThemeProvider, createTheme } from '@mui/material';
import { App } from './App';

// 创建自定义主题
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif',
  },
});

// 应用主题
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);
```

## 浏览器兼容性

YCloud UI 支持所有现代浏览器，包括：

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 下一步

- 浏览组件文档了解更多详细信息和高级用法
- 查看示例项目获取实际应用场景
- 加入社区获取支持和分享经验

## 贡献

我们欢迎所有形式的贡献，包括问题报告、功能请求、文档改进和代码贡献。

## 许可证

YCloud UI 遵循 MIT 许可证发布。
